<style lang="scss" scoped>
  @import "../utils/base.scss";
    .header {
        background-color:white;
        padding: 0px;
        height: 72px;
    }
    .gcontent >>>.ivu-form-item-error-tip {
        position: relative;
        top: -24px;
        left: 100%;
        padding-left: 10px;
        line-height: 1px;
        color: #ed4014;
    }

    .gcontent >>>.ivu-form-item {
        margin-bottom: 10px;
    }
    .tip-text{
        padding:5px 0 0 10px;
        font-size:14px;
        color: rgb(197, 200, 206);
    }
    .all-div{
        //height: 100vh;
        //overflow-y: auto;
        background-color: #f3f3f3
    }
    .iconlabelUrl {
            width: 40px;
            height: 40px;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .myImg {
        border-radius: 4px;
        width: 8.5vw;
        padding-top: 1vh;
        height: 5vh;
            display: inline-block;
            vertical-align: middle;
    }
</style>

<template>
  <!-- <div class="all-div"> -->
  <div style="background-color:white;">
    <template id="baseInfo">
      <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)',width:'190px'}">
        <div v-if="reqId == null || reqId == ''" style="background-color:blue;height:30px;width:18px;"></div>
        <p>注册信息填写-个人信息</p>
      </div>
      <div class="gcontent">
        <Form ref="baseInfo" :rules="baseInfoValidate" :model="applyinfo" :label-width="labelWidth" :hide-required-mark=true
          label-position="right" class="form form_left">
          <Row v-if="reqId != null && reqId != ''">
            <Col span="8">
            <FormItem label="工单ID：">
              <Input :value="reqId" v-model="reqId" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="姓名：" prop='applyname'>
              <Input v-model="applyinfo.applyname" placeholder="请输入真实姓名" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="4A账号：" prop='applyfourA'>
              <Input v-model="applyinfo.applyfourA" placeholder="请输入您的4A主账号" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="联系电话：" prop='applyphone'>
              <Input v-model="applyinfo.applyphone" placeholder="请输入您的联系电话" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="常用邮箱：" prop='applymail'>
              <Input v-model="applyinfo.applymail" placeholder="请输入您的常用邮箱" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="身份证号码：" prop='applycard'>
              <Input v-model="applyinfo.applycard" placeholder="请输入您的身份证号码" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="身份证照片：" prop='idCardImg1'>
              <div class="demo-upload-list" v-if="applyinfo.idCardImg1 != ''">
                  <img :src="applyinfo.idCardImg1">
                  <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView(applyinfo.idCardImg1)"></Icon>
                      <template v-if="!ifedit">
                        <Icon type="ios-trash-outline" @click.native="handleRemove('idCardImg1')"></Icon>
                      </template>
                  </div>
              </div>
              <Upload v-else  :disabled="ifedit" ref="upload" :action="fileUrl + '/open/post/id-card'" :max-size="5120" :before-upload="handleUploadicon1" type="drag"
              style="display: inline-block;width:58px;"
                :on-success="uploadSuccess" :show-upload-list="false" :format="['jpg','jpeg','png']" :on-format-error="handleFormatError1">
                <div style="width: 58px;line-height: 25px;">
                  <Icon type="ios-camera" size="20" style="padding-top: 8px;"></Icon>
                  <p style="font-size: 12px;">正面照</p>
                </div>
              </Upload>
              <div class="demo-upload-list" v-if="applyinfo.idCardImg2 != ''">
                  <img :src="applyinfo.idCardImg2">
                  <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView(applyinfo.idCardImg2)"></Icon>
                      <template v-if="!ifedit">
                        <Icon type="ios-trash-outline" @click.native="handleRemove('idCardImg2')"></Icon>
                      </template>
                  </div>
              </div>
              <Upload v-else :disabled="ifedit" ref="upload" :action="fileUrl + '/open/post/id-card'" :max-size="5120" :before-upload="handleUploadicon2" type="drag"
              style="display: inline-block;width:58px;margin-left: 12px;"
                :on-success="uploadSuccess" :show-upload-list="false" :format="['jpg','jpeg','png']" :on-format-error="handleFormatError1">
                <div style="width: 58px;line-height: 25px;">
                  <Icon type="ios-camera" size="20" style="padding-top: 8px;"></Icon>
                  <p style="font-size: 12px;">反面照</p>
                </div>
              </Upload>
            </FormItem>
            </Col>
          </Row>


          <Row>
            <Col span="20">
            <FormItem label="所属单位：" prop='applycompany'>
              <Input v-model="applyinfo.applycompany" placeholder="请输入您的所属单位" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="所属部门：" prop='applydepartment'>
              <Input v-model="applyinfo.applydepartment" placeholder="请输入您的所属部门" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="注册用途：" prop='application'>
              <Input v-model="applyinfo.application" placeholder="请输入您的注册用途" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="备注：">
              <Input v-model="applyinfo.reqDes" type="textarea" placeholder="选填" :rows="3" :readonly="ifedit" />
            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)',width:'200px'}">
        <div v-if="reqId == null || reqId == ''" style="background-color:blue;height:30px;width:18px;"></div>
        <p>注册信息填写-接口人信息</p>
      </div>
      <div class="gcontent">
        <Form ref="baseInfo2" :rules="baseInfoValidate2" :model="applyinfo" :label-width="labelWidth"
          :hide-required-mark=true label-position="right" class="form form_left">
          <Row>
            <Col span="20">
            <FormItem label="接口人姓名：" prop='itname'>
              <Input v-model="applyinfo.itname" placeholder="请输入接口人姓名" :readonly="reqId != null && reqId != ''" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="20">
            <FormItem label="接口人电话：" prop='itphone'>
              <Input v-model="applyinfo.itphone" placeholder="请输入接口人电话" :readonly="reqId != null && reqId != ''" />
            </FormItem>
            </Col>
          </Row>
          <Row v-if="reqId == null || reqId == ''">
            <Col span="10">
            <FormItem label="验证码：" prop='code'>

                  <Input style="width:11.5vw;" placeholder="请输入验证码" v-model="applyinfo.code"></Input>

                  <div class="myImg">
                    <img id="servletImg" class="imge_info" style="width: 100%;height: 100%;" src="" @click="changImg()" />
                  </div>

            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </template>
    <Modal title="身份证照片" v-model="visible">
        <img :src="ModalImage" v-if="visible" style="width: 100%">
    </Modal>
  </div>

  <!-- </div> -->
</template>

<script>
  import mpage from "../comp_chatter/mpage"
  import pheader from "../comp_chatter/pheader"
  import mheader from "../comp_chatter/mheader"
  import mcontainer from "../comp_chatter/mcontainer"
  import Axios from 'axios'
  import ajax from "../ajax_util"
  import inputSearch from '../base/input_search'

  export default {
    components: {
      mpage,
      mheader,
      mcontainer,
      pheader,
      inputSearch
    },

    data() {
      const validateapplyname = (rule, value, callback) => {
        if (this.applyinfo.applyname == '') {
          callback(new Error('请输入你的姓名'));
        } else {
          callback()
        }
      };
      const validateFourA = (rule, value, callback) => {
        if (this.applyinfo.applyfourA == undefined || this.applyinfo.applyfourA == null || this.applyinfo.applyfourA == "") {
          callback(new Error('请输入你的4A账号'));
        } else {
          callback()
        }
      };
      const validatePhone = (rule, value, callback) => {
        let reg = this.validateUtils.telephoneRule;
        if (this.applyinfo.applyphone == undefined || this.applyinfo.applyphone == '' || !reg.test(this.applyinfo
            .applyphone)) {
          callback(new Error('请填写正确的联系电话'));
        } else {
          callback()
        }
      };
      const validatemail = (rule, value, callback) => {
        let reg = this.validateUtils.eMailRule;
        if (value != '' && value != null) {
          if (!reg.test(value)) {
            callback(new Error('请输入正确的邮箱!'));
          } else {
            callback();
          }
        } else {
          callback(new Error('请输入邮箱!'));
        }
      };
      const validatecard = (rule, value, callback) => {
        let reg = this.validateUtils.idCardRule;
        if (value != '' && value != null) {
          if (!reg.test(value)) {
            callback(new Error('请输入正确的18位身份证号码!'));
          } else {
            callback();
          }
        } else {
          callback(new Error('请输入身份证号码!'));
        }
      };
      const validatecompany = (rule, value, callback) => {
        if (this.applyinfo.applycompany == '') {
          callback(new Error('请输入所属单位'));
        } else {
          callback()
        }
      };
      const validatedepartment = (rule, value, callback) => {
        if (this.applyinfo.applydepartment == '') {
          callback(new Error('请输入所属部门'));
        } else {
          callback()
        }
      };
      const validateapplication = (rule, value, callback) => {
        if (this.applyinfo.application == '') {
          callback(new Error('请输入注册用途'));
        } else {
          callback()
        }
      };
      const validateitname = (rule, value, callback) => {
        if (this.applyinfo.itname == '') {
          callback(new Error('请输入接口人'));
        } else {
          callback()
        }
      };
      const validateitphone = (rule, value, callback) => {
        let reg = this.validateUtils.telephoneRule;
        if (this.applyinfo.itphone == undefined || this.applyinfo.itphone == '' || !reg.test(this.applyinfo
            .itphone)) {
          callback(new Error('请填写正确的联系电话'));
        } else {
          callback()
        }
      };
      const validateidCardImg1 = (rule, value, callback) => {
        if (this.applyinfo.idCardImg1 == '') {
          callback(new Error('请上传身份证正面'));
        } else if (this.applyinfo.idCardImg2 == '') {
          callback(new Error('请上传身份证反面'));
        }else{
          callback()
        }
      };
      const validateidCardImg2 = (rule, value, callback) => {
        if (this.applyinfo.idCardImg2 == '') {
          callback(new Error('请上传身份证反面'));
        } else {
          callback()
        }
      };
      const validateidCode = (rule, value, callback) => {
        if (this.applyinfo.code == undefined || this.applyinfo.code == null || this.applyinfo.code == "") {
          callback(new Error('请填写验证码'));
        } else {
          callback()
        }
      };
      return {
        visible: false, //显示图片对话框
        ModalImage: "", //  显示的图片
        fileUrl: this.CONFIG.file_url,
        logoSrc2: require('../../static/image/logo3.png'),
        readonly: true, //是否只读
        labelWidth: 120,
        img_url: this.CONFIG.file_url + '/open/post/id-card',
        baseInfoValidate: {
          applyname: [{
            required: true,
            validator: validateapplyname,
            trigger: 'change'
          }],
          applyfourA: [{
            required: true,
            validator: validateFourA,
            trigger: 'change'
          }],
          applyphone: [{
            required: true,
            validator: validatePhone,
            trigger: 'change'
          }],
          applymail: [{
            required: true,
            validator: validatemail,
            trigger: 'change'
          }],
          applycard: [{
            required: true,
            validator: validatecard,
            trigger: 'change'
          }],
          applycompany: [{
            required: true,
            validator: validatecompany,
            trigger: 'change'
          }],
          applydepartment: [{
            required: true,
            validator: validatedepartment,
            trigger: 'change'
          }],
          application: [{
            required: true,
            validator: validateapplication,
            trigger: 'change'
          }],
          idCardImg1: [{
            required: true,
            validator: validateidCardImg1,
            trigger: 'change'
          }],
          idCardImg2: [{
            required: true,
            validator: validateidCardImg2,
            trigger: 'change'
          }],
        },
        baseInfoValidate2: {
          itname: [{
            required: true,
            validator: validateitname,
            trigger: 'change'
          }],
          itphone: [{
            required: true,
            validator: validateitphone,
            trigger: 'change'
          }],
          code: [{
            required: true,
            validator: validateidCode,
            trigger: 'change'
          }],
        },
        applyinfo: {
          applyname: "",
          applyfourA: "",
          applyphone: "",
          applymail: "",
          applycard: "",
          labelUrl1: require('../../static/image/user.png'),
          idCardImg1: '',
          labelUrl2: require('../../static/image/user.png'),
          idCardImg2: "",
          applycompany: "",
          applydepartment: "",
          application: "",
          reqDes: "",
          itname: "",
          itphone: "",
          code: ''
        },
        idcode: "",
      }
    },
    computed: {

    },
    mounted() {
      console.log("this.reqId,this.draftsId---------->", this.reqId, this.draftsId)
      this.$nextTick(() => {
        if (this.reqId != null) {
          console.log("获取表单详情---------->");
          this.getApplyInfo(this.reqId); //获取表单详情
        }else{
          this.getUuid();
        }
      })
    },
    methods: {
      getUuid() {
        this.idcode = (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this
          .S4() + this.S4());
        console.log("====idcode=====", this.idcode);
        this.changImg();
      },
      S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      },
      changImg() {
        this.applyinfo.code= ""
        this.utils.delay(() => {
          var img = document.getElementById("servletImg");
          var d = new Date();
          var time = d.getTime(); //如果没有这个
          //下面这一句不会起作用，因为浏览器的缓存技术，图片并不会刷新
          //img.src="/myHelloWeb/servlet/ImageServlet";
          var idcode = this.idcode;
          img.src = this.CONFIG.url_know + "/get-code?" + time + "?" + idcode;
          //?号后面的东西是通过get方式传递的
        }, 300)
      },
      handleRemove (file) {
        if(file == "idCardImg1"){
          console.log("--------->")
          this.applyinfo.idCardImg1 = ""
        }else{
          this.applyinfo.idCardImg2 = ""
        }
        this.$forceUpdate();
      },
      handleView (name) {
          this.ModalImage = name;
          this.visible = true;
      },
      validate() {
        var isSubmit = false
        this.$refs["baseInfo"].validate((valid) => {
          if (valid) {
            this.$refs["baseInfo2"].validate((valid2) => {
              if (valid2) {
                isSubmit = true
              } else {
                isSubmit = false
                this.$Message.error('请填写完整接口人信息和验证码');
              }
            })
          } else {
            this.$Message.error('请填写完整个人信息');
          }
        })
        console.log(isSubmit)
        return isSubmit
      },
      handleFormatError1(file) {
        this.$Message.error("图片格式不正确,请上传正确的图片格式");
      },
      handleUploadicon1(file) {
        var that = this;
        var formdata = new FormData();
        formdata.append("file", file);
        var img_url = that.img_url;
        Axios({
          url: img_url,
          method: 'post',
          data: formdata,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        }).then(response => {
          console.log('response', response)
          this.applyinfo.labelUrl1 = response.data
          this.applyinfo.idCardImg1 = window.URL.createObjectURL(file);
        })
      },
      uploadSuccess(res, file, fileList) {
        let that = this;
        console.log('res._STATUS == 1', res)

      },
      handleUploadicon2(file) {
        var that = this;
        var formdata = new FormData();
        formdata.append("file", file);
        var img_url = that.img_url;
        Axios({
          url: img_url,
          method: 'post',
          data: formdata,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        }).then(response => {
          console.log('response', response)
          this.applyinfo.labelUrl2 = response.data
          this.applyinfo.idCardImg2 = window.URL.createObjectURL(file);
        })
      },
      setimg(img_name1, img_name2) {
        var url1 = this.CONFIG.file_url + '/get/' + img_name1;
        var that = this;
        var result = {}
        Axios.get(url1, {
          responseType: 'blob'
        }).then(function(response) {
          var blob = new Blob([response.data])
          var href = window.URL.createObjectURL(blob)
          result['img1'] = href
          that.applyinfo.idCardImg1 = href
          return href
        })

        var url2 = this.CONFIG.file_url + '/get/' + img_name2;
        Axios.get(url2, {
          responseType: 'blob'
        }).then(function(response) {
          console.log('setimg', response)
          var blob = new Blob([response.data])
          var href = window.URL.createObjectURL(blob)
          console.log('href', href)
          result['img2'] = href
          that.applyinfo.idCardImg2 = href
          return href
        })
        return result
      },
      getApplyInfo(reqId) {
        var url = this.CONFIG.url_know + '/get-register/' + reqId;
        var that = this;
        ajax.get({
          url: url,
          that: that,
          success: function(data) {
            console.log('getApplyInfo', data)
            var temp = data
            var temp1 = {}
            var img_set = that.setimg(temp.idCardImg1, temp.idCardImg2)
            temp1.idCardImg1 = img_set['img1']
            temp1.idCardImg2 = img_set['img2']
            temp1.applyname = temp.user_name
            temp1.applyfourA = temp.fourA
            temp1.applyphone = temp.phone
            temp1.applymail = temp.email
            temp1.applycard = temp.id_card
            temp1.applycompany = temp.company
            temp1.applydepartment = temp.department
            temp1.application = temp.purpose
            temp1.reqDes = temp.reqDes
            temp1.itname = temp.itContact
            temp1.itphone = temp.itContactPhone

            that.applyinfo = temp1
            console.log('that.applyinfo', that.applyinfo)
          }
        })

      },
      getInfo() {
        var t = JSON.stringify(this.applyinfo)
        var temp1 = JSON.parse(t)
        var temp = {
          object: {},
          puslicInfo: {},
        }
        temp.object.user_name = temp1.applyname
        // temp.object.fourA = temp1.applyfourA
        temp.object.phone = temp1.applyphone
        temp.object.email = temp1.applymail
        temp.object.id_card = temp1.applycard
        temp.object.company = temp1.applycompany
        temp.object.department = temp1.applydepartment
        temp.object.purpose = temp1.application
        temp.object.reqDes = temp1.reqDes
        temp.object.itContact = temp1.itname
        temp.object.itContactPhone = temp1.itphone
        temp.object.idCardImg1 = temp1.labelUrl1
        temp.object.idCardImg2 = temp1.labelUrl2
        var publicInfo = this.utils.setPublicInfoInfo('', 0, 0, temp.object.purpose)
        temp.puslicInfo = publicInfo
        return temp
      },
      getInfo01() {
        var t = JSON.stringify(this.applyinfo)
        var temp1 = JSON.parse(t)
        var temp = {
          object: {},
          puslicInfo: {},
        }
        temp.object.user_name = temp1.applyname
        temp.object.fourA = temp1.applyfourA
        temp.object.phone = temp1.applyphone
        temp.object.email = temp1.applymail
        temp.object.id_card = temp1.applycard
        temp.object.company = temp1.applycompany
        temp.object.department = temp1.applydepartment
        temp.object.purpose = temp1.application
        temp.object.reqDes = temp1.reqDes
        temp.object.itContact = temp1.itname
        temp.object.itContactPhone = temp1.itphone
        temp.object.idCardImg1 = temp1.labelUrl1
        temp.object.idCardImg2 = temp1.labelUrl2
        temp.object.code = temp1.code
        temp.object.idcode = this.idcode
        var publicInfo = this.utils.setPublicInfoInfo('', 0, 0, temp.object.purpose)
        temp.puslicInfo = publicInfo
        return temp
      },
      submint() {
        if (this.validate()) {
          var temp1 = this.getInfo01()
          var temp = temp1.object
          var url = this.CONFIG.url_know + '/register';
          var that = this;
          ajax.post({
            url: url,
            that: that,
            data: temp,
            success: function(data) {
              console.log('submint:', data)
              if (data === -1) {
                that.$Message.error('注册重复');
              }
              if (data === 0) {
                that.$Message.error('对接人没有找到或者对接人不是运营人员');
              }
              if (data === 1) {
                that.$Message.success('提交成功，待审批人进行审批');
              }
            }
          })
        }
      },
      //保存时的参数
      saveParams(handleInfo) {
        handleInfo.reqSubject = ""
        handleInfo.startTime = 0
        handleInfo.hopeTime = 0
        handleInfo.reqDes = this.applyinfo.application
        handleInfo.isEdit = this.isEdit;
        console.log("aaaa-------->", this.ifedit, this.isEdit == 1)
        handleInfo.isChangeContent = 1;
        handleInfo.content = this.getInfo01()
      },
      // 获取处理时需要提交的参数
      getHandleParams(handleInfo) {
        handleInfo.reqSubject = ""
        handleInfo.startTime = 0
        handleInfo.hopeTime = 0
        handleInfo.reqDes = this.applyinfo.application
        handleInfo.isEdit = this.isEdit;
        console.log("aaaa-------->", this.ifedit, this.isEdit == 1)
        handleInfo.isChangeContent = 1;
        handleInfo.content = this.getInfo()
      },
      //处理页面获取下一步处理人需要的参数
      getHandleUserParams(opOptions) {
        var param = {}
        if (opOptions != "") {
          param.vari = opOptions
        }
        return param
      },

    },
    props: {
      isEdit:{},
      ifedit: {
        type: Boolean,
        default: false,
      },
      reqId: {
        default: null
      },
      Papplyinfo: {

      }
    },
  }
</script>
